<template>
  <div class="toolbarNodeBtnList" :class="[dir, { isDark: isDark }]">
    <template v-for="item in list">
      <div
        v-if="item === 'back'"
        class="toolbarBtn"
        :class="{
          disabled: readonly || backEnd
        }"
        @click="emit('execCommand', 'BACK')"
      >
        <span class="icon iconfont iconhoutui-shi"></span>
        <span class="text">{{ $t('toolbar.undo') }}</span>
      </div>
      <div
        v-if="item === 'forward'"
        class="toolbarBtn"
        :class="{
          disabled: readonly || forwardEnd
        }"
        @click="emit('execCommand', 'FORWARD')"
      >
        <span class="icon iconfont iconqianjin1"></span>
        <span class="text">{{ $t('toolbar.redo') }}</span>
      </div>
      <div
        v-if="item === 'painter'"
        class="toolbarBtn"
        :class="{
          disabled: activeNodes.length <= 0 || hasGeneralization,
          active: isInPainter
        }"
        @click="emit('startPainter')"
      >
        <span class="icon iconfont iconjiedian"></span>
        <span class="text">{{ $t('toolbar.painter') }}</span>
      </div>
      <div
        v-if="item === 'siblingNode'"
        class="toolbarBtn"
        :class="{
          disabled: activeNodes.length <= 0 || hasRoot || hasGeneralization
        }"
        @click="emit('execCommand', 'INSERT_NODE')"
      >
        <span class="icon iconfont iconjiedian"></span>
        <span class="text">{{ $t('toolbar.insertSiblingNode') }}</span>
      </div>
      <div
        v-if="item === 'childNode'"
        class="toolbarBtn"
        :class="{
          disabled: activeNodes.length <= 0 || hasGeneralization
        }"
        @click="emit('execCommand', 'INSERT_CHILD_NODE')"
      >
        <span class="icon iconfont icontianjiazijiedian"></span>
        <span class="text">{{ $t('toolbar.insertChildNode') }}</span>
      </div>
      <div
        v-if="item === 'deleteNode'"
        class="toolbarBtn"
        :class="{
          disabled: activeNodes.length <= 0
        }"
        @click="emit('execCommand', 'REMOVE_NODE')"
      >
        <span class="icon iconfont iconshanchu"></span>
        <span class="text">{{ $t('toolbar.deleteNode') }}</span>
      </div>
      <div
        v-if="item === 'image'"
        class="toolbarBtn"
        :class="{
          disabled: activeNodes.length <= 0
        }"
        @click="emit('showNodeImage')"
      >
        <span class="icon iconfont iconimage"></span>
        <span class="text">{{ $t('toolbar.image') }}</span>
      </div>
      <div
        v-if="item === 'icon'"
        class="toolbarBtn"
        :class="{
          disabled: activeNodes.length <= 0
        }"
        @click="showNodeIcon"
      >
        <span class="icon iconfont iconxiaolian"></span>
        <span class="text">{{ $t('toolbar.icon') }}</span>
      </div>
      <div
        v-if="item === 'link'"
        class="toolbarBtn"
        :class="{
          disabled: activeNodes.length <= 0
        }"
        @click="emit('showNodeLink')"
      >
        <span class="icon iconfont iconchaolianjie"></span>
        <span class="text">{{ $t('toolbar.link') }}</span>
      </div>
      <div
        v-if="item === 'note'"
        class="toolbarBtn"
        :class="{
          disabled: activeNodes.length <= 0
        }"
        @click="emit('showNodeNote')"
      >
        <span class="icon iconfont iconflow-Mark"></span>
        <span class="text">{{ $t('toolbar.note') }}</span>
      </div>
      <div
        v-if="item === 'tag'"
        class="toolbarBtn"
        :class="{
          disabled: activeNodes.length <= 0
        }"
        @click="emit('showNodeTag')"
      >
        <span class="icon iconfont iconbiaoqian"></span>
        <span class="text">{{ $t('toolbar.tag') }}</span>
      </div>
      <div
        v-if="item === 'freeTextBox'"
        class="toolbarBtn"
        @click="createFreeTextNode"
      >
        <span class="icon iconfont iconxingzhuang-wenzi"></span>
        <span class="text">{{ $t('toolbar.freeTextBox') }}</span>
      </div>
      <div
        v-if="item === 'summary'"
        class="toolbarBtn"
        :class="{
          disabled: activeNodes.length <= 0 || hasRoot || hasGeneralization
        }"
        @click="emit('execCommand', 'ADD_GENERALIZATION')"
      >
        <span class="icon iconfont icongaikuozonglan"></span>
        <span class="text">{{ $t('toolbar.summary') }}</span>
      </div>
      <div
        v-if="item === 'associativeLine'"
        class="toolbarBtn"
        :class="{
          disabled: activeNodes.length <= 0 || hasGeneralization
        }"
        @click="emit('createAssociativeLine')"
      >
        <span class="icon iconfont iconlianjiexian"></span>
        <span class="text">{{ $t('toolbar.associativeLine') }}</span>
      </div>
      <div
        v-if="item === 'formula'"
        class="toolbarBtn"
        :class="{
          disabled: activeNodes.length <= 0 || hasGeneralization
        }"
        @click="showFormula"
      >
        <span class="icon iconfont icongongshi"></span>
        <span class="text">{{ $t('toolbar.formula') }}</span>
      </div>
      <div
        v-if="item === 'attachment'"
        class="toolbarBtn"
        :class="{
          disabled: activeNodes.length <= 0 || hasGeneralization
        }"
        @click="selectAttachmentFile"
      >
        <span class="icon iconfont iconfujian"></span>
        <span class="text">{{ $t('toolbar.attachment') }}</span>
      </div>
      <div
        v-if="item === 'outerFrame'"
        class="toolbarBtn"
        :class="{
          disabled: activeNodes.length <= 0 || hasGeneralization
        }"
        @click="emit('execCommand', 'ADD_OUTER_FRAME')"
      >
        <span class="icon iconfont iconwaikuang"></span>
        <span class="text">{{ $t('toolbar.outerFrame') }}</span>
      </div>
      <div
        v-if="item === 'ai'"
        class="toolbarBtn"
        :class="{
          disabled: hasGeneralization
        }"
        @click="aiCrate"
      >
        <span class="icon iconfont iconAIshengcheng"></span>
        <span class="text">{{ $t('toolbar.ai') }}</span>
      </div>
      <div
        v-if="item === 'file'"
        class="toolbarBtn"
        :class="{
          disabled: activeNodes.length <= 0
        }"
        @click="emit('showNodeFile')"
      >
        <span class="icon iconfont iconwenjian"></span>
        <span class="text">{{ $t('toolbar.file') }}</span>
      </div>
    </template>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
import { storeToRefs } from 'pinia'
import { useI18n } from 'vue-i18n'
import { useMainStore } from '@/stores'
import { useEventBus } from '@/hooks'

// 组合式API设置
const { t } = useI18n()
const store = useMainStore()
const { localConfig } = storeToRefs(store)
const { setActiveSidebar } = store
const { $on, $off, $emit, $once } = useEventBus()

// 计算属性
const isDark = computed(() => localConfig.value.isDark)

// Emit定义
const emit = (event, ...args) => {
  $emit(event, ...args)
}

// Props
const props = defineProps({
  dir: {
    type: String,
    default: 'h' // h（水平排列）、v（垂直排列）
  },
  list: {
    type: Array,
    default() {
      return []
    }
  }
})

// 响应式数�?
const activeNodes = ref([])
const backEnd = ref(true)
const forwardEnd = ref(true)
const readonly = ref(false)
const isFullDataFile = ref(false)
const timer = ref(null)
const isInPainter = ref(false)

// 计算属�?
const hasRoot = computed(() => {
  return (
    activeNodes.value.findIndex(node => {
      return node.isRoot
    }) !== -1
  )
})

const hasGeneralization = computed(() => {
  return (
    activeNodes.value.findIndex(node => {
      return node.isGeneralization
    }) !== -1
  )
})

const annotationRightHasBtn = computed(() => {
  const index = props.list.findIndex(item => {
    return item === 'annotation'
  })
  return index !== -1 && index < props.list.length - 1
})

// 生命周期钩子
onMounted(() => {
  $on('mode_change', onModeChange)
  $on('node_active', onNodeActive)
  $on('back_forward', onBackForward)
  $on('painter_start', onPainterStart)
  $on('painter_end', onPainterEnd)
})

onBeforeUnmount(() => {
  $off('mode_change', onModeChange)
  $off('node_active', onNodeActive)
  $off('back_forward', onBackForward)
  $off('painter_start', onPainterStart)
  $off('painter_end', onPainterEnd)
})

// 方法
const onModeChange = (mode) => {
  readonly.value = mode === 'readonly'
}

const onNodeActive = (...args) => {
  activeNodes.value = [...args[1]]
}

const onBackForward = (index, len) => {
  backEnd.value = index <= 0
  forwardEnd.value = index >= len - 1
}

const onPainterStart = () => {
  isInPainter.value = true
}

const onPainterEnd = () => {
  isInPainter.value = false
}

const showNodeIcon = () => {
  $emit('close_node_icon_toolbar')
  setActiveSidebar('nodeIconSidebar')
}

const showFormula = () => {
  setActiveSidebar('formulaSidebar')
}

const selectAttachmentFile = () => {
  $emit('selectAttachment', activeNodes.value)
}

const onSetAnnotation = (...args) => {
  $emit('execCommand', 'SET_NOTATION', activeNodes.value, ...args)
}

// 创建自由文本节点
const createFreeTextNode = () => {
  $emit('createFreeTextNode')
}
const aiCrate = () => {
  $emit('ai_create_all')
}
</script>

<style lang="less">
.toolbarNodeBtnList {
  display: flex;

  &.isDark {
    .toolbarBtn {
      color: hsla(0, 0%, 100%, 0.9);

      .icon {
        background: transparent;
        border-color: transparent;
      }

      &:hover {
        &:not(.disabled) {
          .icon {
            background: hsla(0, 0%, 100%, 0.05);
          }
        }
      }

      &.disabled {
        color: #54595f;
      }
    }
  }

  .toolbarBtn {
    display: flex;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    margin-right: 20px;

    &:last-of-type {
      margin-right: 0;
    }

    &:hover {
      &:not(.disabled) {
        .icon {
          background: #f5f5f5;
        }
      }
    }

    &.active {
      .icon {
        background: #f5f5f5;
      }
    }

    &.disabled {
      color: #bcbcbc;
      cursor: not-allowed;
      pointer-events: none;
    }

    .icon {
      display: flex;
      height: 26px;
      background: #fff;
      border-radius: 4px;
      border: 1px solid #e9e9e9;
      justify-content: center;
      flex-direction: column;
      text-align: center;
      padding: 0 5px;
    }

    .text {
      margin-top: 3px;
      text-align: center;
    }
  }

  &.v {
    display: block;
    width: 120px;
    flex-wrap: wrap;

    .toolbarBtn {
      flex-direction: row;
      justify-content: flex-start;
      margin-bottom: 10px;
      width: 100%;
      margin-right: 0;

      &:last-of-type {
        margin-bottom: 0;
      }

      .icon {
        margin-right: 10px;
      }

      .text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
